<script setup>
import {onMounted, ref, toRefs, watch} from "vue";
import {useStore} from "vuex";
import {ElementUtils} from "@/assets/js/ElementUtils";
import ContentRender from "@/components/content/ContentRender.vue";

const props = defineProps({
  tid: {type: Number, required: true},
})
const {tid} = toRefs(props)
const store = useStore();

const data = ref();

const request = (tid, force) => {
  const loading = ElementUtils.loading({target: "#toppedTopic",});
  return store.dispatch("Read/readToppedTopic", {tid, force}).then(res => {
    console.log(res)
    data.value = res;
  }).finally(() => {
    loading.close();
  })
}

onMounted(() => {
  setTimeout(() => {
    request(tid.value, false)
  }, 10)
})

watch(tid, (nv) => {
  request(nv, false)
})


</script>

<template>
  <div id="toppedTopic">
    <template v-if="data">
      <h4>{{ data.title }}</h4>
      <content-render :data="data.nodes"/>
    </template>
  </div>
</template>

<style scoped>
#toppedTopic {
  min-height: 300px;
}
</style>